<script setup>
import { ref } from 'vue';

const product = ref({
  name: 'Product Name',
  description: 'Product Description',
  price: 0,
  image: 'https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&fmt=auto&app=120&f=JPEG?w=1140&h=641',
});
</script>

<template>
<div style="width: 100%;">
  <HCnavbar title="商品详情" :leftArrow="true"/>
  <div class="product-details">
    <div class="product-image">
      <img :src="product.image" :alt="product.name" />
    </div>
    <div style="height: 200px; background-color: #10854D; border-radius:30px ;padding-left: 20px;padding-right: 20px;">
      <h2>{{ product.name }}</h2>
      <div>{{ product.description }}</div>
      <div>Price: ${{ product.price }}</div>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
.product-details {
  .product-image img {
  width: 100%;
  height: 400px;
}

}

</style>
